<template>
  <section class="admin-module">
    <div class="container" v-show="modifyMatch==false">
      <div class="admin-operate">
        <div id="timeFilter">
          <input type="date" v-model="minTime" @change="requestMatchNum();"/>
          <span>至</span>
          <input type="date" v-model="maxTime" @change="requestMatchNum();"/>
        </div>
        <select id="leagueFilter" @change="requestMatchNum();">
          <option value="">联赛</option>
          <option v-for="item in leagues" :value="item">{{ item }}</option>
        </select>
        <select id="statusFilter" @change="requestMatchNum();">
          <option value="">状态</option>
          <option value="0">未赛</option>
          <option value="1">进行中</option>
          <option value="2">已赛</option>
        </select>
        <button id="createMatch" @click="showModify()">新建</button>
      </div>
      <table class="admin-table">
        <tr>
          <th>时间</th>
          <th>选手1</th>
          <th>选手2</th>
          <th class="hidden-xs hidden-sm">链接</th>
          <th>联赛</th>
          <th class="hidden-xs hidden-sm">项目</th>
          <th class="hidden-xs">状态</th>
        </tr>
        <tr v-for="item in matchs" :id="'match_'+item.id">
          <td>{{ item.displayTime }}</td>
          <td><span>{{ item.player11 }}</span><br><span>{{ item.player12 }}</span></td>
          <td><span>{{ item.player21 }}</span><br><span>{{ item.player22 }}</span></td>
          <td class="match-links hidden-xs hidden-sm">
            <a v-for="link in item.links" :href="link.url" target="view_window">{{ link.name }}</a>
          </td>
          <td>{{ item.league }}</td>
          <td class="hidden-xs hidden-sm">{{ getType(item.type) }}</td>
          <td class="hidden-xs">{{ getStatus(item.status) }}</td>
          <div class="operates">
            <div v-show="!showRemove || current!=item.id">
              <button class="glyphicon glyphicon-edit" title="编辑" @click="showModify(item)"></button>
              <button class="glyphicon glyphicon-remove" title="删除" @click="showRemove=true;current=item.id"></button>
            </div>
            <div v-show="showRemove && current==item.id">
              <button  @click="deleteMatch(item.id)">确定</button>
              <button  @click="showRemove=false">取消</button>
            </div>
          </div>
        </tr>
      </table>
      <div id="yq_pagination"></div>
    </div>
    <Modify v-if="modifyMatch!==false" :data="modifyMatch" v-on:close="hideModify"></Modify>
  </section>
</template>

<style scoped lang="scss">
  @import '../../assets/css/variables.scss';

  #timeFilter{ 
    display: inline-block; max-width: 342px; background: #ddd; padding: 0 4px; 
    input{
      height: 22px; width: 130px; margin: 4px 0px;
    }
    button{
      line-height: 16px; margin: 4px 0;
      &.active{
        border: 1px solid $hl-color; background: $hl-color; color: #fff;
      }
    }
  }

  .admin-table{ 
    .match-links > a{ 
      margin-right: 8px; 
    }
  }
</style>

<script>
  import Modify from './AMatchModify'

  export default {
    name: 'Header',
    components: {Modify},
    data () {
      return {
        matchs: null,
        modifyMatch: false,
        isChangeTime: false,
        minTime: null,
        maxTime: null,
        leagues: [],
        tableLength: 15,
        showRemove: false,
        current: null,
      }
    },

    computed: {
      
    },

    methods: {

      requestTimeRange(){
        let self = this;
        //时间
        $.ajax({
          url: '/start/admin/match/getTimeRange',
          type: 'POST',
          data: {},
          success(result){
            self.minTime = commons.getTimeNumToStr(+result.min, 'yyyy-MM-dd');
            self.maxTime = commons.getTimeNumToStr(+result.max, 'yyyy-MM-dd');
            self.requestMatchNum();
          },
          error(result){
            
          }
        });
      },

      requestLeagues(){
        let self = this;
        //联赛
        $.ajax({
          url: '/start/admin/match/getLeagues',
          type: 'POST',
          data: {},
          success(result){
            self.leagues = result;
          },
          error(result){
            
          }
        });
      },

      requestMatchs(_page){
        debugger;
        let self = this,
          minTime = commons.getFullTime(this.minTime),
          maxTime = commons.getFullTime(this.maxTime, true),
          league = $('#leagueFilter').val(),
          status = $('#statusFilter').val();

        $.ajax({
          url: '/start/match/getMatchs',
          type: 'POST',
          data: {
            'minTime': minTime,
            'maxTime': maxTime,
            'league': league || '',
            'status': status || '',
            'page': _page || 0,
            'length': self.tableLength,
            'order': false
          },
          success(result){
            debugger;
            result.map(function(match){
              //时间
              match.displayTime = commons.getTimeNumToStr(match.time, 'yyyy/MM/dd hh:mm');
              match.time = commons.getTimeNumToStr(match.time, 'yyyy-MM-ddThh:mm');
              //链接
              let linkArr = [];
              if(match.links){
                let links = match.links.split(';');
                for(var i in links){
                  let values = links[i].split(',');
                  linkArr.push({
                    'name': values[0],
                    'title': values[1],
                    'url': values[2]
                  });
                }
              }
              match.links = linkArr;
              return match;
            })
            
            self.matchs = result;
          },
          error(result){
            
          }
        });
      },

      requestMatchNum(){
        let self = this,
          minTime = commons.getFullTime(this.minTime),
          maxTime = commons.getFullTime(this.maxTime, true),
          league = $('#leagueFilter').val(),
          status = $('#statusFilter').val();

        $.ajax({
          url: '/start/admin/match/getMatchNum',
          type: 'POST',
          data: {
            'minTime': minTime,
            'maxTime': maxTime,
            'league': league || '',
            'status': status || ''
          },
          success(result){
            debugger;
            self.pagination = new Pagination({
              target: '#yq_pagination',
              callback: self.requestMatchs,
              length: 5,
              sum: Math.ceil(result / self.tableLength),
              showGroup: true
            });
          },
          error(result){
            
          }
        });
      },

      showModify(params){
        var match = params ? params : null;
        this.modifyMatch = match;
        //$('#modifyMatch').show();
      },

      hideModify(isClose){
        this.modifyMatch = false;
        isClose && this.requestTimeRange();
      },

      deleteMatch(id){
         $.ajax({
          url: '/start/admin/match/delete',
          type: 'POST',
          data: {
            'id': id
          },
          success(result){
            $('#match_'+id).remove();
          },
          error(result){
            
          }
        });
      },

      setTimeStatus(flag){
        this.isChangeTime = flag;
      },

      getType(type){
        switch(type){
          case 'l':
            return '联赛';
          case 'm':
            return '男单';
          case 'w':
            return '女单';
          case 'mm':
            return '男双';
          case 'ww':
            return '女双';
          case 'mw':
            return '混双';
          default:
            return '无';
        }
      },

      getStatus(status){
        switch(status){
          case 0:
            return '未赛';
          case 1:
            return '进行中';
          case 2:
            return '已赛';
        }
      }
    },
    mounted(){
      debugger;
      this.requestTimeRange();
      this.requestLeagues();
    }
  }
</script>
